<template>
  <div id="all" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
    <div :class="[assistant ? 'content cleanContent' : 'content']" :style="{ backgroundImage: 'url(' + store.store_banner_thumb + ')' }" v-show="!loadingPopup">
      <!-- 消费者端 -->
      <template v-if="!assistant">
        <div class="search_top">
          <i class="fa fa-angle-left" style="color: #fff;" @click="goback"></i>
          <div style="display: flex;flex:1;">
            <input @click.stop="searchJump" type="text" readonly placeholder="搜索店内商品" />
            <i class="iconfont icon-sousuo"></i>
          </div>
        </div>
        <div class="storeInfo_box" ref="storeInfo_box" :class="{ amout: amout }">
          <div class="storeTopBox">
            <div class="storeImg">
              <img :src="store.store_thumb" alt="" />
            </div>
            <div class="storeInfo">
              <div class="storeInfo_title">{{ store.store_name }}</div>
              <div class="sotrInfo_phone">店铺电话：{{ store.store_mobile }}</div>
            </div>
          </div>
          <div class="dispatchBox">
            <div class="dispatch" v-for="(dispatch, i) in store.dispatch" :key="i">{{ dispatch }}</div>
          </div>
          <div class="coupon-box" v-if="showCoupon">
            <div class="coupon-left">
              <span class="red-span" v-if="i < 3" v-for="(coupon, i) in get_coupon" :key="i">{{ coupon.name }}</span>
            </div>
            <div class="coupon" @click.stop="gotoCupcon" v-if="get_coupon && get_coupon.length > 0">
              <span>更多优惠</span>
              <i class="iconfont icon-icon_more11"></i>
            </div>
          </div>
        </div>
        <div class="storeDesc" ref="storeDesc" :class="{ amout: amout }">
          <div class="descBox dline" v-if="store.store_introduce">
            <div class="desc_top" @click="descShow = true">
              <div class="desc_l">详情介绍</div>
              <i class="iconfont icon-icon_more11 desc_r"></i>
            </div>
            <div class="desc_bottom">{{ store.store_introduce }}</div>
          </div>
          <div class="line" v-if="store.store_introduce"></div>
          <div class="descBox">
            <div class="desc_top">
              <div class="desc_l">营业时间</div>
            </div>
            <div class="desc_bottom_time">{{ store.business_hours }}</div>
          </div>
          <div class="descBox dbottom">
            <div class="desc_top">
              <div class="desc_l">门店地址</div>
            </div>
            <div class="desc_bottom_time">
              {{ store.store_address }}
              <div class="locIcon" @click="goToAdress">
                <i class="iconfont icon-zx_map_local"></i>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div v-else style="display: flex;align-items: center;">
        <i class="iconfont icon-member-left" style="color: #999;margin-left: 1rem;" @click="goback"></i>
        <div class="search_top_clean" style="flex:1;">
          <input @click.stop="searchJump" type="text" readonly placeholder="搜索店内商品" />
        </div>
      </div>
      <div class="menu_evaluate_business">
        <div class="nav">
          <ul class="select">
            <li v-for="(name, index) in tab" @click="changeTab(index)" :key="index">
              <span :class="index === tabIndex ? 'current' : ''">
                {{ name }}
              </span>
            </li>
          </ul>
          <div class="line" v-if="activeName && activeName.length == 0"></div>
          <div class="line-1" v-else></div>
        </div>

        <!-- 菜单 -->
        <div class="goods_box">
          <div class="sort_box" ref="menuWrapper" v-if="category && category.length !== 0">
            <ul class="box">
              <li
                v-for="(items, indexs) in category"
                :class="{ current1: items.id === category_id }"
                ref="list_li_menulist"
                :style="indexs == category.length - 1 ? 'margin-bottom:3.5rem' : ''"
                :key="indexs + 1"
                @click.stop="getSecondCategory(items, $event)"
              >
                <strong class="first">
                  <var style="-webkit-box-orient: vertical;">
                    {{ items.name }}
                  </var>
                </strong>
              </li>
              <div :style="{ height: amout ? '3.5rem' : '10.5rem' }"></div>
            </ul>
          </div>

          <div class="box-right">
            <div class="catagoryBox p30">
              <van-collapse v-model="activeName" :border="false" style="background: #fff;">
                <van-collapse-item name="1" :border="false">
                  <div slot="title" class="activetitle">
                    <!-- 自定义标题 -->
                    <dl v-show="activeName != 1">
                      <dt v-for="(o, index) in secondCategory" :key="index" :class="o.id == secondaryId ? 'addClass' : 'removeClass'" @click.stop="getSecondGoods(o.id)">{{ o.name }}</dt>
                    </dl>
                    <!-- <span v-show="activeName == 1">{{ $i18n.t("category.选择分类") }}</span> -->
                    <span v-show="activeName == 1" class="category-name">{{ category_name }}</span>
                  </div>
                  <div style="overflow-y: scroll; max-height: 32vh;">
                    <dl>
                      <dt
                        v-for="(Secondary, index) in secondCategory"
                        :key="index"
                        :class="Secondary.id == secondaryId ? 'addClass1' : 'removeClass1'"
                        @click.stop="getSecondGoods(Secondary.id), Secondary.name"
                      >
                        {{ Secondary.name }}
                      </dt>
                    </dl>
                  </div>

                  <p v-if="fun.isTextEmpty(secondCategory)">暂无二级分类</p>
                </van-collapse-item>
              </van-collapse>
            </div>
            <!--<div v-if="scrollMargin > 50 && category[0] && category_id!=category[0].id">下拉加载</div>-->
            <div class="goods_list" id="wrapper" ref="foodsWrapper">
              <div>
                <div class="food-list">
                  <div class="food-list-hook">
                    <div class="Goods" v-if="goods && goods.length == 0" style="justify-content: center;">暂无商品</div>
                    <template v-for="(food, i) in goods">
                      <div class="Goods" @click.stop="goToGoodsO2O(food)">
                        <div class="goodsImg">
                          <img :src="food.thumb" />
                        </div>
                        <div class="goods_right">
                          <ul class="goodsName">
                            <li class="name">{{ food.title }}</li>
                            <li class="buy">已售{{ food.show_sales + food.virtual_sales }}{{ food.sku }}</li>
                            <div class="show_time_word_txt" v-if="food.show_time_word">{{ food.show_time_word }}</div>
                            <div class="show_price_box" v-if="!fun.isTextEmpty(food.goods_show)">
                              <div class="show_price" :class="[i % 2 == 0 ? 'red_white' : 'white_red']" v-for="(item, ind) in food.goods_show" :key="ind">{{ item.name }}:{{ item.value }}</div>
                            </div>
                            <template v-else>
                              <li class="sum sum1" v-if="food.vip_level_status && food.vip_level_status.status == 1">
                                <span style="font-size: 0.75rem;">{{ $i18n.t("money") }}</span>
                                <span style="color: #fff;">{{ food.vip_level_status.word }}</span>
                              </li>
                              <li class="sum" v-else>
                                <span>{{ $i18n.t("money") }}</span
                                >{{ food.price }}
                              </li>
                            </template>
                          </ul>
                          <div class="specBtn" v-if="food.has_option === 1 && tabIndex === 0">
                            <span class="goods-num" :class="goodsCarts[food.id] ? 'show' : 'hide'" v-if="goodsCarts[food.id]">{{ goodsCartsTotal[food.id].total }} </span>
                            <button type="button" @click.stop="addGood(food)">
                              选规格
                            </button>
                          </div>
                          <div v-else>
                            <div class="addBtn" v-if="food.has_option !== 1 && tabIndex === 0">
                              <i class="iconfont icon-store_reduceLine" @click.stop="numberLeft(food, goodsCarts[food.id])" :class="goodsCarts[food.id] ? 'show' : 'hide'"></i>
                              <input
                                title="数量"
                                :id="`goodsInputs${food.id}`"
                                :class="goodsCarts[food.id] ? 'show' : 'hide'"
                                v-if="goodsCarts[food.id]"
                                type="number"
                                class="goodsNumber"
                                @click.stop
                                v-model.lazy="goodsCarts[food.id].total"
                                @focus="clickCount(goodsCarts[food.id])"
                                @blur="changeCount(goodsCarts[food.id], food)"
                              />
                              <i class="iconfont icon-store_plus" @click.stop="numberRight(food, goodsCarts[food.id])" v-show="!food.reserve_goods"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="goods_content_show" v-if="food.goods_content_show" :key="i">
                        <!-- 商品内容显示 #81889-->
                        <div class="goods_content_show_item" v-for="(contentChild, contentChild_index) in food.goods_content_show" :key="contentChild_index">
                          {{ contentChild.name }}{{ contentChild.value }}
                        </div>
                      </div>
                      <div :key="i" class="reserveTxt" v-if="food.reserve_goods">
                        <span v-if="food.reserve_number">可预约数量：{{ food.reserve_number.can_reserve }}</span>
                        <span class="reserveTxt_R" v-if="food.reserve_number">已预约数量：{{ food.reserve_number.already_reserve }}</span>
                      </div>
                    </template>
                    <!--showLength为了补位滑动-->
                    <div class="Goods" style="height: 6rem;" v-for="food in showLength" :key="i"></div>
                  </div>
                  <div id="loadMore" style="height: 8.5rem;"></div>
                </div>
                <div v-if="category.length == 0">该门店没有商品</div>
              </div>
              <div class="loadNomore" v-if="loading" style="margin: 0 auto 2.5rem; text-align: center; width: 100%; height: 5.625rem;">
                <img style="width: 5rem; height: 3.75rem;" src="@/assets/images/no-more-product.png" />
              </div>
            </div>
            <div class="mongolian-layer" v-if="activeName == 1"></div>
          </div>
        </div>
      </div>

      <!-- 未添加商品 -->
      <div class="Go_settle" v-show="carts.length === 0 && !store.operating_state && !descShow && tabIndex === 0">
        <div style="display: flex;align-items: center;padding-left: 1.125rem;">
          <i class="iconfont icon-gouwuche_" @click="trggleCart"></i>
          <p style="padding-left: 0.78rem;">购物车是空的</p>
        </div>
        <button type="button" @click.stop="goodsOrder(goodsCarts)">
          请选择商品
        </button>
      </div>
      <!-- 已添加商品 -->
      <div class="Go_settle complete" v-show="carts.length > 0 && !store.operating_state && !descShow && tabIndex === 0">
        <div style="display: flex;align-items: center;">
          <div :style="minicartStyle" class="relative">
            <span class="number" v-show="!this.showCart">{{ cartsNum }}</span>
            <i class="iconfont icon-gouwuche_" @click="trggleCart"></i>
          </div>
          <p :style="leftPrice">
            <span style="font-size:0.75rem">{{ $i18n.t("money") }}</span
            >{{ cartsTotal }}
          </p>
        </div>

        <button @click.stop="goodsOrder(goodsCarts)" type="button">
          去结算
        </button>
      </div>
      <van-popup v-model="showCart" position="bottom" round :style="{ width: '100%', maxHeight: '60%', overflow: 'auto', zIndex: 2500 }">
        <div class="top">
          <div class="top-box">
            <span @click="trggleCart">购物车</span>
            <span class="select">(已选{{ cartsNum }}件) </span>
          </div>
          <div class="clear_car" @click.stop="clearCart('all')">
            <i class="iconfont icon-delete"></i>
            <span>清空购物车</span>
          </div>
        </div>
        <div class="carPopup" ref="cartWrapper">
          <div>
            <div class="goodsList">
              <div class="goods" v-for="(item, index) in carts" :key="index" @click.stop="goToGoodsO2O(item)" v-if="item.is_failure == 0">
                <!--<van-checkbox v-model="checked"></van-checkbox>-->
                <div class="goods_img">
                  <img :src="item.goods.thumb" />
                </div>
                <ul class="goodsName flex-j-sb">
                  <li class="name">
                    <div class="install-tag" v-if="item.live_install && item.live_install.open_state == 1">安装</div>
                    <div class="goods-names">{{ item.goods.title }}</div>
                  </li>
                  <span class="goodsName-option " v-if="item.option_str">{{ item.option_str }}</span>
                  <li class="price">
                    {{ $i18n.t("money") }}<span style="font-size:0.875rem">{{ item.goods.price }}</span>
                  </li>
                </ul>
                <div class="addBtn">
                  <i class="iconfont icon-store_reduceLine" @click.stop="numberLeft1(item, index)"></i>
                  <input type="number" :id="`itemIputs${index}`" v-model="carts[index].total" @focus="clickCount(item)" @blur="changeCount(item)" @click.stop />
                  <i class="iconfont icon-store_plus" @click.stop="numberRight1(item, index)"></i>
                </div>
              </div>
            </div>
            <div class="failBox" v-if="checkFail">
              <div class="failBoxL">失效商品</div>
              <div class="failBoxR" @click.stop="clearCart('fail')">
                <i class="iconfont icon-delete"></i>
                清空失效
              </div>
            </div>
            <template v-for="(item, index) in carts">
              <div class="failureGood goods" :key="index" v-if="item.is_failure == 1">
                <div class="goods_img">
                  <img :src="item.goods.thumb" class="op" />
                  <div class="txt">已下架</div>
                </div>
                <ul class="goodsName">
                  <li class="name opf">
                    <div class="goods-names op flex">
                      <div class="install-tag" v-if="item.live_install && item.live_install.open_state == 1">安装</div>
                      {{ item.goods.title }}
                    </div>
                    <span v-if="item.option_str" class="op goodsName-option">{{ item.option_str }}</span>
                  </li>
                  <li class="price op opf_m">
                    {{ $i18n.t("money") }}<span style="font-size:0.875rem">{{ item.goods.price }}</span>
                  </li>
                </ul>
              </div>
            </template>
            <div style="height: 3.5rem;"></div>
          </div>
        </div>
      </van-popup>

      <!--选规格-->
      <div class="scroll-hide">
        <van-popup v-model="show2" position="center" round>
          <div class="spec_big_box">
            <h3 class="title">
              <span class="spec_big_box_title">{{ popTitle }}</span>
              <i @click.stop="close" class="iconfont icon-close11"></i>
            </h3>
            <div class="spec_box q5" :style="{ width: fun.getPhoneEnv() == 3 ? '375px' : '100%' }">
              <div class="spec_a">
                <div v-for="(spec, i) in goodsInfo.has_many_specs" :key="i">
                  <h5>{{ spec.title }}：</h5>
                  <ul class="option">
                    <li @click.stop="selectSpecs(item, item.id)" v-for="(item, i) in spec.specitem" :key="i" :class="specidArray.includes(item.id) ? 'cur' : ''">
                      {{ item.title }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="add_car">
              <ul class="car_btn">
                <li class="left">
                  <span>{{ $i18n.t("money") }}</span
                  >{{ popPrice }}
                  <span style="margin-left: 0.3rem;">库存：{{ popStock }}</span>
                </li>
                <li class="right">
                  <span v-show="!popNum && popStock >= 1" @click.stop="submitAction">加入购物车</span>
                  <span v-show="popStock <= 0" style="background: #999;">库存不足</span>
                </li>
                <div class="Box" v-show="popNum >= 1">
                  <i class="iconfont icon-store_reduceLine" @click.stop="updateCart(popCard.id, -1)"></i>
                  <label class="show">{{ popNum }}</label>
                  <i class="iconfont icon-store_plus" @click.stop="updateCart(popCard.id, 1)"></i>
                </div>
              </ul>
            </div>
          </div>
        </van-popup>
      </div>
    </div>

    <div class="loadingPopup" v-show="loadingPopup">
      <p class="tips" style="padding: 1rem;">
        商品加载中 请稍后...
      </p>
    </div>
    <div class="posHistory" @click="toOrderRecord" v-if="!assistant">
      <div class="posHistory_t">
        <i class="iconfont icon-lishidingdan"></i>
      </div>
      <div class="posHistory_b">历史订单</div>
    </div>
    <van-popup v-model="descShow" position="bottom" :style="{ height: '85%' }" round>
      <div class="introduce">
        <div class="introduce-head flex-a-c flex-j-sb">
          <h3>详情介绍</h3>
          <div class="introduce-down  flex-a-c" @click.stop="descShow = false">
            <span class="iconfont icon-guanbi"></span>
          </div>
        </div>
        <div class="introduce-content">
          <p v-if="!infoShow">暂无详情...</p>
          <div id="store_content" v-if="infoShow" v-html="info"></div>
        </div>
        <div style="height: 3.5rem;"></div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import self_bartending_store from "./self_bartending_store_controller";

export default self_bartending_store;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.relative {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 1.125rem;
}
.box-right .catagoryBox ::v-deep .van-cell__right-icon {
  margin-left: 0.3125rem;
  // flex: 1;
  text-align: right;
}
.box-right .catagoryBox ::v-deep .van-cell {
  border: 1px solid #fff;
}
.box-right .catagoryBox ::v-deep .van-cell__title {
  width: calc(100% - 10%);
  overflow-x: scroll;
}
.goods_content_show {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0.75rem;
}
::v-deep .activetitle {
  text-align: left;
}
::v-deep .van-collapse-item__content {
  padding: 0 0.7188rem 0.75rem;
}
.box-right {
  float: right;
  min-height: 90vh;
  overflow: hidden;
  width: 78%;
  background: #fff;
  position: relative;
  z-index: 2;
  .category-name {
    color: #3b3b4a;
    font-size: 0.9375rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.3125rem;
    display: block;
  }
  .mongolian-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 1;
  }
}
.icon-gouwuche_ {
  display: flex;
  align-items: center;
  justify-content: center;
}
.affiche-popup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.375rem 0.75rem 1.125rem;
  .affiche-popup-tips {
    font-weight: bold;
    font-size: 1rem;
    color: #00001c;
  }
  .icon-guanbi {
    font-size: 12px;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    background: #f0f0f1;
    border-radius: 100%;
  }
}
.affiche-popup-text {
  font-weight: 400;
  font-size: 0.8125rem;
  text-align: left;
  color: #6e6e79;
  padding: 0 0.75rem;
}
.mb-50 {
  height: 3.125rem;
  clear: both;
}

.food-list-hook {
  padding-bottom: 6rem;
}
.group-pt {
  margin: 1.25rem 0 0 0;
}
.loadingPopup {
  position: absolute;
  left: calc(50% - 5rem);
  top: calc(65% - 4rem);
  border-radius: 20px;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  font-style: normal;
}

select,
option {
  word-wrap: normal;
}

select {
  font-size: 16px;
}

textarea {
  font-size: 15px;
}

img {
  border: 0;
  vertical-align: auto;
}

ul,
li {
  list-style: none;
}

button {
  outline-style: none;
}

.checkbox,
input[type="checkbox"] {
  vertical-align: middle;
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  -webkit-appearance: none;
  appearance: none;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.tips {
  line-height: 3.5rem;
}

.btn-sure {
  padding: 0.3rem 0.6rem;
  background: #f15353;
  color: #fff;
}

.amout {
  margin-top: -8rem;
  display: none;
  opacity: 0;
}
.box-right ::v-deep .van-cell {
  padding: 0 0.75rem;
}
.goods_content_show_item {
  font-size: 12px;
  color: #6e6e79;
  margin: 0 8px 0 0;
}
#all {
  background-color: #f5f5f5;
  position: relative;
  height: 100vh;
  .content {
    position: relative;
    padding-top: 4.625rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 6.9375rem;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.2;
    }

    .back_search {
      position: fixed;
      top: 0;
      width: 100%;
      height: 2.75rem;
      line-height: 2.75rem;
      padding: 0 0.875rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 100;

      .fa {
        font-size: 1.75rem;
        color: #fff;
      }

      .iconfont {
        font-size: 1.375rem;
        color: #fff;
      }
    }

    .search_top {
      position: fixed;
      top: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding: 0 0.875rem;
      display: flex;
      align-items: center;

      /* background: #fff; */
      z-index: 100;

      .fa {
        font-size: 1.75rem;
        color: #f2f2f2;
      }

      input {
        background: #fff;
        font-size: 0.75rem;
        height: 1.875rem;
        line-height: 1.875rem;
        width: 100%;
        border-radius: 1rem;
        padding-left: 1.8rem;
        margin-left: 0.7813rem;
        align-self: center;
      }

      .iconfont {
        font-size: 0.875rem;
        color: #8c8c8c;
        position: absolute;
        left: 3.25rem;
        align-self: center;
      }
    }

    .storeInfo_box {
      z-index: 10;
      background: #fff;
      width: calc(100% - 1.5rem);
      margin: 0 auto;
      border-radius: 0.625rem;
      box-shadow: 0rem 0.3125rem 0.8125rem 0.0313rem #efefef;
      padding: 0.875rem 0.75rem 0.75rem;
      position: relative;
      top: 0;
      left: 0;
      transition: all 0.4s ease-out 0s;
      .storeTopBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.63rem;
        .storeImg {
          flex-shrink: 0;
          width: 3.5rem;
          height: 3.5rem;
          background: #737373;
          border-radius: 50%;
          margin-right: 0.5rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .storeInfo {
          flex: 1;
          overflow: hidden;
          text-align: left;
          .storeInfo_title {
            font-weight: bold;
            font-size: 1.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25rem;
          }
          .sotrInfo_phone {
            margin-top: 0.38rem;
            font-size: 0.81rem;
            color: #6e6e79;
          }
        }
      }
      .dispatchBox {
        display: flex;
        margin-bottom: 0.38rem;
        .dispatch {
          padding: 0.16rem 0.19rem;
          box-sizing: border-box;
          font-size: 0.63rem;
          color: #3b3b4a;
          border-radius: 0.19rem;
          border: 0.03rem solid #d6d6dc;
          margin-right: 0.31rem;
        }
      }

      .coupon-box {
        height: 0.9375rem;
        text-align: left;
        display: flex;
        .icon-icon_more11 {
          font-size: 12px;
        }

        .coupon-left {
          display: flex;
          align-items: center;
          flex: 1;
          word-break: keep-all;
        }

        .red-span {
          color: #f15353;
          border: 1px solid #f15353;
          border-radius: 0.1875rem;
          padding: 0 0.2813rem;
          margin-right: 0.25rem;
          font-size: 0.625rem;
        }
      }
      .coupon {
        justify-content: flex-end;
      }
      .coupon-box .coupon {
        /* margin-top: 0.3125rem; */
        display: flex;
        overflow: hidden;
        align-items: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 0.6rem;
        width: 45%;
        font-size: 0.75rem;
        flex: 0 0 27%;
        text-align: right;
        color: #8e8e95;
      }

      // .reduction-left::-webkit-scrollbar {
      //   height: 5px !important;
      //   width: 5px !important;
      // }
      .reduction-box {
        text-align: left;
        display: flex;
        align-items: center;
        color: #f15353;
        padding-top: 0.25rem;

        .reduction-left {
          flex: 1;
          padding: 0 0.2rem 0 0;
          white-space: nowrap;
          overflow-x: scroll;
        }
        .reduction-left span {
          color: #f15353;
          border: 1px solid #f15353;
          border-radius: 0.1875rem;
          padding: 0 0.2813rem;
          margin-right: 0.25rem;
          font-size: 0.625rem;
        }
        .reduction-right {
          flex-shrink: 0;
          // width: 7rem;
          overflow: hidden;
          margin-left: 0.5rem;
          border: 1px solid #f15353;
          border-radius: 0.1875rem;
          padding: 0 0.2813rem;
          font-size: 0.625rem;
          height: 0.9375rem;
        }
      }
      .notice-box-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // margin-top: 0.4375rem;
        margin-bottom: 0.5625rem;
        span {
          width: 95%;
          text-align: left;
          font-size: 12px;
          color: #8e8e95;
          display: -webkit-box;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          line-height: 1;
        }
        i {
          width: 5%;
          color: #8e8e95;
          font-size: 12px;
          text-align: right;
        }
      }
    }
    .storeDesc {
      margin: 0.63rem 0.75rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      background: #fff;
      .dline {
        overflow: hidden;
        background: linear-gradient(180deg, #eef3f8 0%, #ffffff 100%);
      }
      .dbottom {
        padding-bottom: 0.84rem !important;
        padding-top: 0 !important;
      }
      .line {
        margin: 0 0.63rem;
        height: 0.03rem;
        background: #e6e6e6;
      }
      .descBox {
        padding: 0.94rem 0.63rem;
        box-sizing: border-box;

        .desc_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .desc_l {
            font-weight: bold;
            font-size: 0.81rem;
            color: #00001c;
          }
          .desc_r {
            color: #aaaab3;
            font-size: 0.7rem;
          }
        }
        .desc_bottom_time {
          text-align: left;
          font-size: 0.81rem;
          color: #6e6e79;
          margin-top: 0.47rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          .locIcon {
            flex-shrink: 0;
            margin-left: 1rem;
            width: 1.5rem;
            height: 1.5rem;
            background: #f0f0f1;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon-zx_map_local {
              font-size: 0.75rem;
              color: #000;
            }
          }
        }
        .desc_bottom {
          margin-top: 0.6rem;
          font-size: 0.81rem;
          color: #6e6e79;
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .menu_evaluate_business {
      background: #fff;
      // margin-top: 0.75rem;
      position: relative;
      z-index: 5;
      .line {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #f5f5f5;
        height: 1px;
      }
      .line-1 {
        position: absolute;
        left: 0;
        width: 5.125rem;
        bottom: 0;
        background-color: #f5f5f5;
        height: 1px;
      }
      .nav {
        position: relative;
        height: 3.0313rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 10;
        position: relative;
        padding: 0.75rem 0.75rem 0.6563rem 1.8125rem;
        .select {
          display: flex;

          li {
            margin-right: 2.4063rem;
            font-size: 15px;
            color: #00001c;

            span {
              display: inline-block;
              line-height: 2.5rem;
            }

            .current {
              font-size: 16px;
              font-weight: bold;
              color: #00001c;
              position: relative;
            }

            .current::after {
              content: "";
              width: 0.9375rem;
              height: 0.1875rem;
              border-radius: 0.9375rem;
              background: #f15353;
              position: absolute;
              bottom: 0.2813rem;
              left: 50%;
              transform: translate(-50%, 0);
            }
          }
        }
        .tiktok_btn {
          font-size: 12px;
          border: solid 0.0625rem #f15353;
          border-radius: 1rem;
          background-color: #f15353;
          height: 1.625rem;
          padding: 0 0.625rem;
          color: #fff;
          margin-right: 0.4688rem;
        }
        .buy_btn {
          font-size: 12px;
          border: solid 0.0625rem #f15353;
          border-radius: 1rem;
          height: 1.625rem;
          padding: 0 0.625rem;
          color: #f15353;
        }

        .car_btn {
          font-size: 12px;
          border: solid 0.0625rem #ff9800;
          border-radius: 1rem;
          height: 1.625rem;
          padding: 0 0.625rem;
          color: #ff9800;
        }
      }
    }
    // .homeseller-bg {
    //   // background-color: transparent;
    // }

    .goods_box {
      // background: #f2f2f2;
      display: flex;
      position: absolute;
      width: 100%;
      // height: 83%;
      height: 80vh;
      overflow: hidden;

      .sort_box {
        height: 100%;
        overflow: hidden;
        flex: 0 0 5rem;
        background: #f9f9f9;

        .second {
          background: #fff;
          position: relative;
        }

        .second::after {
          height: 100%;
          content: "";
          width: 0.0625rem;
          position: absolute;
          top: 0;
          right: 0;

          /* border-right: 1px solid #999999; */
          transform: scaleX(0.5);
        }

        .box {
          li {
            min-height: 3.25rem;
            // padding-top: 1.2813rem;
            // padding-bottom: 1.1563rem;
            text-align: center;
            color: #3b3b4a;
            font-size: 0.8125rem;
            strong {
              padding: 0 0.875rem;
              min-height: 2.875rem;
              -webkit-box-pack: center;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              display: flex;
              align-items: center;
              font-size: 13px;
              box-sizing: border-box;

              var {
                line-height: 1.25rem;
                font-size: 13px;
                text-align: left;
              }
            }

            .current {
              background: #fff;
              color: #f15353;
              position: relative;
            }

            /* .current::before {
              content: "";
              background: #f15353;
              width: 0.3rem;
              height: 100%;
              position: absolute;
              top: 0;
              left: -0.0625rem;
            } */
          }

          .current1 .first {
            color: #f15353;
            position: relative;
            background: #fff;
            font-size: 0.8125rem;
            font-weight: 500;

            var {
              font-weight: bold;
            }
          }

          .current1 .first::before {
            content: "";
            background: #f15353;
            width: 0.1875rem;
            height: 1.25rem;
            position: absolute;
            border-radius: 0.9375rem;
            top: 50%;
            left: -0.0625rem;
            transform: translate(0, -50%);
          }
        }
      }

      .goods_list {
        flex: 1;
        height: 100%;
        overflow: hidden;
        background: #fff;

        .title {
          /* background: #f2f2f2; */
          line-height: 1.875rem;
          font-size: 12px;
          padding: 0 0.625rem;
          text-align: left;
        }
        .Goods:first-child {
          margin-top: 0;
        }
        .Goods {
          display: flex;
          flex-wrap: wrap;
          padding: 0 0.625rem;
          margin: 0.9375rem 0;
          position: relative;

          .goodsImg {
            width: 5rem;
            height: 5rem;
            background: #f2f2f2;
            border-radius: 0.25rem;
            overflow: hidden;
            margin-right: 0.625rem;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .goods_right {
            .goodsName {
              text-align: left;
              width: 11.3125rem;
              height: 100%;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .name {
                font-size: 0.875rem;
                font-weight: 500;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                // white-space: nowrap;
                color: #3b3b4a;
                line-height: 1.125rem;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .buy {
                font-size: 12px;
                color: #8c8c8c;
                margin-top: 0.175rem;
              }

              .sum {
                font-size: 1rem;
                font-weight: 500;
                color: #f15353;
                margin-top: 0.125rem;

                span {
                  font-size: 14px;
                }
              }

              .sum1 {
                box-sizing: border-box;
                color: #f15353;
                font-size: 0.5rem;
                height: 1.25rem;
                line-height: 1.25rem;
                overflow: hidden;

                span:last-child {
                  background: #f15353;
                  padding: 0.25rem 0.375rem;
                  border-top-left-radius: 0.625rem;
                  border-bottom-right-radius: 0.625rem;
                }
              }
            }

            .specBtn {
              position: absolute;
              bottom: 0;
              right: 0.625rem;

              .goods-num {
                position: absolute;
                z-index: 10;
                border-radius: 0.6rem;
                padding: 0 0.3125rem;
                top: -8px;
                right: -9px;
                background: #ff5d5c;
                color: #fff;
              }

              button {
                font-size: 12px;
                background: #f15353;
                color: #fff;
                border-radius: 1rem;
                width: 3.25rem;
                height: 1.5rem;
              }
            }

            .addBtn {
              position: absolute;
              bottom: 0.3125rem;
              right: 0.625rem;
              display: flex;

              .iconfont {
                width: 1.75rem;
                height: 1.75rem;
                line-height: 1.75rem;
                font-size: 26px;
                color: #f15353;
              }

              // .icon-store_reduceLine {
              //   color: #aaa;
              // }

              input {
                width: 2rem;
                text-align: center;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .evaluate_box {
      background: #f5f5f5;
      padding: 0.625rem 0.75rem;

      .evaluate_number {
        padding: 0.9375rem 0;
        border-radius: 0.625rem;

        background: #fff;
        margin-bottom: 0.625rem;

        .evaluate_info {
          position: relative;
          display: flex;
          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1px;
            height: 1.5625rem;
            background: #d6d6dc;
            transform: translate(-50%, -50%);
          }

          li {
            width: 50%;

            h6 {
              font-size: 1.5rem;
              font-weight: bold;
              color: #00001c;
            }

            span {
              font-size: 12px;
              color: #8e8e95;
            }
          }
        }
      }

      .evaluate_list {
        margin-top: 0.625rem;

        .user_box {
          display: flex;
          padding: 0.9375rem 0.9375rem 0;
          overflow: hidden;
          margin-bottom: 0.625rem;
          background: #fff;
          border-radius: 0.5rem;

          .ueser_img {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 2rem;
            background: #f2f2f2;
            overflow: hidden;
            margin-right: 0.625rem;

            img {
              width: 100%;
            }
          }

          .user_info {
            width: 100%;

            .info_a {
              text-align: left;
              display: flex;

              .name_date {
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                flex: 1;

                .name {
                  font-size: 14px;
                  font-weight: bold;
                  width: 100%;
                  overflow: hidden; /* 超出部分隐藏 */
                  text-overflow: ellipsis; /* 超出部分显示省略号 */
                  white-space: nowrap; /* 规定段落中的文本不进行换行 */
                }
              }
            }

            .date {
              font-size: 12px;
              color: #8e8e95;
            }

            .text {
              font-size: 14px;
              line-height: 1.25rem;
              margin-top: 0.625rem;
              text-align: left;
            }

            .img_box {
              display: flex;
              flex-wrap: nowrap;
              margin-top: 0.3125rem;

              .img {
                width: 5.9375rem;
                height: 5.9375rem;
                overflow: hidden;
                background: #f2f2f2;
                margin-right: 0.4375rem;
                margin-bottom: 0.4375rem;
                flex-shrink: 0;

                img {
                  width: 100%;
                  height: 100%;
                }
              }
              // .img:nth-child(3n) {
              //   margin-right: 0;
              // }
            }

            .goodlnfo {
              // height: 2.5rem;
              display: flex;
              align-items: center;
              text-align: left;
              background-color: #f9f9f9;
              border-radius: 0.5rem;
              padding: 0.4375rem 0.625rem 0.4375rem 0.4375rem;
              margin: 0 0 0.625rem;
              .goodlnfo-bottom {
                flex: 1;
              }
              img {
                flex-shrink: 0;
                width: 2.5rem;
                height: 2.5rem;
                margin-right: 0.4375rem;
                border-radius: 0.375rem;
              }
              .price {
                color: #f15353;
                font-size: 0.75rem;
                font-weight: 500;
              }

              .goodMain {
                display: flex;
                justify-content: space-between;
                flex: 1;

                .titless {
                  font-weight: 500;
                  font-size: 0.75rem;
                  color: #00001c;
                  width: 11rem;
                  overflow: hidden; /* 超出部分隐藏 */
                  text-overflow: ellipsis; /* 超出部分显示省略号 */
                  white-space: nowrap; /* 规定段落中的文本不进行换行 */
                }
              }

              .sales {
                width: 20%;
                // line-height: 2.5rem;
                font-size: 12px;
                text-align: right;
                color: #6e6e79;
              }
            }
          }
        }
      }
    }

    .store_box {
      background: #f5f5f5;
      padding: 12px 0 0 0;
      min-height: 70vh;
      // background: linear-gradient( 180deg, #FFFFFF 0%,#FFFFFF 130px,#F5F5F5 152px, #F5F5F5 100%);
      .tab-box {
        padding: 0.5rem 0.8rem;
        display: flex;
        flex-wrap: wrap;

        li {
          padding: 0.2rem 0.5rem;
          color: #999;
          margin: 0 0.5rem 0.3rem 0;
          font-weight: bold;
        }

        .choose {
          background-image: linear-gradient(#ff2c29, #ff2c29), linear-gradient(#ff7747, #ff7747);
          color: #fff;
          border-radius: 0.875rem;
        }
      }

      .detail-box {
        padding: 0.5rem 0.8rem;
        text-align: left;

        .detail-item {
          margin-bottom: 0.5rem;

          .delivery_amount {
            margin-left: 0.5rem;
            color: #ed0606;
            font-weight: 400;
          }
        }

        .detail-title {
          flex: 1;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 0.5rem;
        }

        .icon-all_daohang {
          flex: 0 0 1rem;
          font-size: 26px;
          color: #ff2c29;
        }

        .time {
          font-weight: bold;
          font-size: 16px;
          color: #ff2c29;
        }
      }

      .goods-box {
        display: flex;
        flex-wrap: wrap;

        .good-item {
          width: 48.5%;
          margin-bottom: 0.5rem;
          font-size: 15px;

          .good-img {
            width: 100%;
            height: 10rem;
            border-radius: 5px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
            }
          }

          .good-title {
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .good-price {
            color: #ff2c29;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .good-item:nth-child(odd) {
          margin: 0 0.5rem 0.5rem 0;
        }
      }

      .live-box {
        display: flex;
        flex-wrap: wrap;
        padding: 0.5rem 0.8rem;

        .live-item {
          width: 48.5%;
          margin-bottom: 0.5rem;
          position: relative;
          padding-bottom: 1rem;

          .live-img-box {
            position: relative;
            width: 100%;
            height: 12rem;
            color: #fff;

            img {
              width: 100%;
              height: 100%;
              border-radius: 12px;
            }

            .left-top {
              position: absolute;
              left: 0.5rem;
              top: 0.5rem;
              font-size: 12px;

              .status {
                background: #ff2c29;
                border-radius: 5px;
                padding: 2px 3px;
              }

              .gray {
                background: #999;
              }
            }

            .right-top {
              position: absolute;
              top: 0.3rem;
              right: 1rem;

              .icon-zb_goods {
                font-size: 28px;
                color: #ffa303;
              }

              .goods-num {
                position: absolute;
                top: 3px;
                right: -10px;
                font-size: 10px;
                color: #ff2c29;
                background: #fff;
                border-radius: 9px;
                padding: 1px 2px;
              }
            }

            .bottom-title {
              position: absolute;
              bottom: 1rem;
              left: 0.5rem;
              text-align: left;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }

          .title-box {
            width: 80%;
            position: absolute;
            bottom: 0;
            right: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .member-img {
            width: 1.75rem;
            height: 1.75rem;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            left: 0;

            img {
              margin-top: 0.12rem;
              width: 1.5rem;
              height: 1.5rem;
              border-radius: 50%;
            }
          }
        }

        .live-item:nth-child(odd) {
          margin: 0 0.5rem 0.5rem 0;
        }
      }

      .member-box {
        padding: 20px 12px 10px 12px;

        .member-item {
          display: flex;
          border-bottom: 0.0625rem solid #eee;
          padding: 12px;
          background-color: #fff;
          border-radius: 0.75rem;
          margin: 0 0 0.625rem 0;

          .img-box2 {
            flex: 0 0 3.75rem;
            width: 3.75rem;
            height: 3.75rem;

            // img {
            //   width: 100%;
            //   height: 100%;
            //   border-radius: 50%;
            // }
          }

          .text-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: left;
            margin-left: 0.625rem;
            font-size: 0.75rem;
            color: #3b3b4a;
            p {
              &:last-child {
                padding: 0.25rem 0 0 0;
              }
            }
            .name {
              font-weight: bold;
              font-size: 1rem;
              color: #00001c;
              line-height: 1.125rem;
            }
            .icon-icon_more11 {
              font-size: 0.875rem;
              color: #aaaab3;
              padding: 0 0 0 0.125rem;
            }
          }
          .phone-wrap {
            margin-right: 2.6875rem;
          }
          .phone-box {
            display: flex;
            // padding:0 0 0.5rem 0;
            font-size: 0.75rem;
            align-items: center;
            justify-content: space-between;

            .icon-box {
              align-items: center;
              display: flex;
              width: 1.5rem;
              height: 1.5rem;
              border-radius: 50%;
            }
            .icon-box:nth-child(1) {
              background: #d9f5e7;
              margin: 0 1.25rem 0 0;
            }
            .icon-box:last-child {
              background: #e2ecfe;
              margin: 0;
            }
            .icon-card_weixin {
              color: #10c86c;
              font-size: 1.125rem;
            }
            .icon-zx_map_tel {
              color: #1961f1;
              font-size: 0.875rem;
            }
          }
        }
      }
    }

    .Go_settle {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 3.5rem;
      background: #fff;
      display: flex;
      justify-content: space-between;
      border: 1px solid #f0f0f1;
      z-index: 2999;

      .iconfont {
        width: 2.25rem;
        height: 2.25rem;
        color: #fff;
        background: linear-gradient(329deg, #ff1313 0%, #fb7676 100%);
        border-radius: 50%;
        font-size: 1.5rem;
        // position: absolute;
        // left: 0.625rem;
        // bottom: 0.5rem;
        transition: transform 0.4s ease-out 0s;
        padding: 0.2rem;
      }

      p {
        font-size: 16px;
        color: #666;
        // padding-left: 0.7813rem;
        line-height: 3.5rem;
      }

      button {
        padding: 0 1.4063rem;
        height: 2.188rem;
        border-radius: 60px;
        background: #b1b1b1;
        color: #fff;
        font-size: 0.9375rem;
        align-self: center;
        margin-right: 0.75rem;
      }
    }

    .complete {
      .number {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        height: 1.125rem;
        line-height: 1.125rem;
        padding: 0 0.3438rem;
        border-radius: 50%;
        text-align: center;
        font-size: 12px;
        background: #fca624;
        color: #fff;
        transform: translate(50%, -25%);
      }

      .iconfont {
        // display: flex !important;
        // align-items: center !important;
        // width: 2.25rem;
        // height: 2.25rem;
        color: #fff;
        background: linear-gradient(329deg, #ff1313 0%, #fb7676 100%);
        border-radius: 50%;
        color: #fff;
        font-size: 1.5rem;
        transition: transform 0.4s ease-out 0s;
        padding: 0.2rem;
      }

      p {
        color: #f15353;
        transition: transform 0.4s ease-out 0s;
        font-size: 1.125rem;
        // padding-left: 0.7813rem;
        font-weight: bold;
      }

      button {
        // width: 5.688rem;
        padding: 0 1.4063rem;
        height: 2.188rem;
        border-radius: 60px;
        background: #f15353;
        color: #fff;
        font-size: 0.9375rem;
        align-self: center;
      }
    }

    .top {
      display: flex;
      justify-content: space-between;
      padding: 0 0.75rem;
      align-items: center;
      // height: 2.5rem;
      margin-bottom: 0.3125rem;
      .top-box {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        span {
          font-size: 1rem;
          font-weight: bold;
          color: #3b3b4a;
        }
      }

      .select {
        margin-left: 0.25rem;
        line-height: 2.5rem;
      }

      .clear_car {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 0.75rem;
        color: #6e6e79;

        .iconfont {
          font-size: 1.125rem;
          margin-right: 0.25rem;
        }
      }
    }

    .carPopup {
      max-height: 22rem;
      overflow: auto;

      .goodsList {
        padding: 0 0.75rem;
      }
      .goods:last-child {
        padding-bottom: 1.125rem;
      }
      .goods {
        display: flex;
        position: relative;
        padding: 0 0 0.9375rem;

        .goods_img {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 0.5rem;
          overflow: hidden;
          background: #f2f2f2;
          margin-right: 0.5rem;
          position: relative;

          img {
            width: 100%;
          }
          .txt {
            position: absolute;
            top: 1.25rem;
            left: 0.38rem;
            height: 1.25rem;
            width: 80%;
            z-index: 999;
            color: #fff;
            font-size: 0.69rem;
            line-height: 1.25rem;
          }
          .txt::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: #000000;
            opacity: 0.6;
            border-radius: 0.94rem;
            z-index: -1;
          }
        }

        .goodsName {
          flex: 1;
          overflow: hidden;
          text-align: left;
          flex-direction: column;
          .goodsName-option {
            font-size: 0.75rem;
            color: #aaaab3;
          }

          .name {
            display: flex;
            align-items: center;
            color: #3b3b4a;

            .goods-names {
              font-size: 0.875rem;
              font-weight: 500;
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .install-tag {
              background: #ff6b1b;
              font-size: 10px;
              font-weight: 500;
              color: #fff;
              padding: 0 5px;
              border-radius: 2px;
              margin-right: 4px;
            }
          }

          .price {
            color: #f15353;
            font-size: 0.75rem;
          }
        }

        .addBtn {
          position: absolute;
          bottom: 0.625rem;
          right: 0;
          display: flex;

          .iconfont {
            width: 1.75rem;
            height: 1.75rem;
            line-height: 1.75rem;
            font-size: 1.625rem;
            color: #f15353;
          }

          // .icon-store_reduceLine {
          //   color: #aaa;
          // }

          input {
            width: 1.5rem;
            text-align: center;
            font-size: 0.875rem;
          }
        }
      }
      .goods:last-child {
        border-bottom: none;
      }
      .op {
        opacity: 0.5;
      }
      .opf {
        flex-direction: column;
        align-items: start !important;
      }
      .opf_m {
        margin-top: 0 !important;
      }
      .failureGood {
        display: flex;
        position: relative;
        padding: 0.625rem 0.875rem;
        align-items: center;
        background: rgba(255, 255, 255, 0.3) !important;
        border-bottom: none;
      }

      .failBox {
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.94rem 0.75rem;
        padding-bottom: 0.4rem;
        border-top: 0.625rem solid #f5f5f5;
        .icon-delete {
          margin-right: 0.25rem;
        }
        .failBoxL {
          color: #3b3b4a;
          font-size: 0.875rem;
          font-weight: 500;
        }
        .failBoxR {
          color: #6e6e79;
          font-size: 0.75rem;
          display: flex;
          align-items: center;
        }
      }
    }

    .food-list-title {
      border-radius: 0.625rem 0.625rem 0 0;
      width: 100%;
      background-color: #fff;
      border-bottom: solid 0.0625rem #ebebeb;
      line-height: 1.875rem;
      font-size: 12px;
      padding: 0 0.625rem;
      text-align: left;
    }

    .title {
      border-radius: 0.625rem 0.625rem 0 0;
      width: 100%;
      background-color: #fff;
      line-height: 2.75rem;
      font-size: 16px;
      position: absolute;
      top: 0;

      i {
        position: absolute;
        right: 0.875rem;
        line-height: 2.75rem;
        color: #999;
        font-size: 1.125rem;
      }
    }

    .spec_big_box {
      position: relative;
      background: #fff;
      width: 20.625rem;
      min-height: 24.375rem;
      border-radius: 0.625rem;

      .spec_big_box_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        width: 19rem;
        padding-right: 1rem;
        box-sizing: border-box;
      }
    }

    .spec_box {
      background: #fff;
      height: 17.375rem;
      overflow-y: scroll;
      position: absolute;
      top: 2.5rem;

      .spec_a {
        margin-top: 0.625rem;

        h5 {
          display: block;
          line-height: 2.5rem;
          text-align: left;
          padding-left: 1.25rem;
        }

        .option {
          display: flex;
          padding: 0 1.25rem;
          flex-wrap: wrap;

          .cur {
            border: solid 0.0625rem #f15353;
            background: #faf0f0;
          }

          li {
            cursor: pointer;
            padding: 0 6px;
            min-height: 1.875rem;
            line-height: 1.875rem;
            margin-right: 0.625rem;
            margin-bottom: 0.625rem;
            background: #f5f5f5;
            border: solid 0.0625rem #ebebeb;
            border-radius: 0.1875rem;
          }
        }
      }
    }

    .add_car {
      width: 100%;
      height: 3.4375rem;
      line-height: 3.4375rem;
      background-color: #fff;
      border-top: solid 0.0625rem #ebebeb;
      border-radius: 0 0 0.625rem 0.625rem;
      position: absolute;
      bottom: 0;

      .car_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.875rem;

        .left {
          color: #f15353;
          font-size: 16px;
          text-align: left;
          flex: 0 0 13rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          span {
            font-size: 16px;
          }
        }

        .right span {
          display: block;
          width: 5.5625rem;
          height: 1.875rem;
          line-height: 1.875rem;
          border-radius: 1rem;
          background: #f15353;
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
  .cleanContent {
    padding-top: 0 !important;
    height: 0 !important;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    .search_top_clean {
      margin: 0.5rem 0.75rem;
      padding: 0 0.875rem;
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 1rem;

      input {
        flex: 1;
        font-size: 0.75rem;
        height: 1.875rem;
        line-height: 1.875rem;
        padding-left: 0 !important;
        margin-left: 0 !important;
        align-self: center;
      }

      .iconfont {
        flex-shrink: 0;
        font-size: 0.875rem;
        color: #8c8c8c;
        margin-right: 1.38rem;
      }
    }
  }
  .Box {
    position: absolute;
    bottom: 0.625rem;
    right: 0.625rem;
    display: flex;

    .iconfont {
      width: 1.75rem;
      height: 1.75rem;
      line-height: 1.75rem;
      font-size: 26px;
      color: #f15353;
    }

    // .icon-store_reduceLine {
    //   color: #aaa;
    // }

    input {
      width: 2rem;
      text-align: center;
      font-size: 12px;
    }
  }

  .Box label {
    right: 2.1875rem;
    color: #333;
    font-size: 12px;
    padding: 0;
    width: 1.5rem;
    height: 1.75rem;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    line-height: 1.75rem;
    vertical-align: top;
    -webkit-background-origin: content-box;
    background-origin: content-box;
    background-color: transparent;
  }

  .Box .hide {
    display: none;
  }

  /* 选规格end */
}

.pcStyle {
  .goods_box,
  .Go_settle,
  .search_top {
    width: 375px !important;
  }
}

.pc {
  position: absolute !important;
}
.p30 {
  padding: 0.9375rem 0;
}
.catagoryBox {
  position: relative;
  z-index: 999;
  background: #fff;
  // padding: 0.9375rem 0 ;

  .threeTitle {
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: left;
  }

  dl {
    display: flex;
    flex-wrap: wrap;

    dt {
      font-size: 12px;
      height: 1.75rem;
      line-height: 1.75rem;
      padding: 0 0.5rem;
      border-radius: 0.25rem;
      margin-right: 0.5rem;
      margin-bottom: 0.4375rem;
      background-color: #f8f8fb;
      color: #3b3b4a;
    }

    .addClass {
      color: #f15353;
      background-color: #feeded;
    }

    .addClass1 {
      border: none;
      color: #f15353;
      background-color: #feeded;
      // border-radius: 0.875rem;
    }

    .removeClass1 {
      border: none;
    }
  }

  .activetitle {
    dl {
      flex-wrap: nowrap;

      dt {
        flex-shrink: 0;
        margin-bottom: 0;
        height: 24px;
        line-height: 24px;
      }
    }
  }
}

/* 门店拼团 */
.show_price_box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.show_price {
  font-size: 10px;
  color: #ff2c29;
  border: solid #ff2c29 1px;
  padding: 1px 4px;
  margin-top: 5px;
}

.red_white {
  color: #fff;
  background: #ff2c29;
  margin-right: 5px;
}

.white_red {
  color: #ff2c29;
  background: #fff;
}

/* 门店拼团 */
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
.balance {
  background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/independenceBalance(1).png") center center no-repeat;
  background-size: cover;
  border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
  border: 0.0625rem solid #ffffff;
  padding: 1.1875rem 0.9375rem;
  margin: 0rem 0.75rem 0 0.75rem;
  .balance-left {
    h3 {
      font-size: 0.8125rem;
      line-height: 0.8125rem;
      color: #c89273;
      padding: 0 0 0.375rem 0;
      text-align: left;
    }
    .price-cir {
      span {
        font-size: 0.75rem;
        color: #ffc7aa;
        font-weight: bold;
      }
      .pric {
        font-size: 1.25rem;
      }
    }
  }
  .balance-rihgt {
    background: linear-gradient(115deg, #f3e8e0 0%, #f6b593 100%);
    border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
    font-weight: bold;
    font-size: 0.9375rem;
    line-height: 0.9375rem;
    color: #4e3019;
    padding: 0.5625rem 1.0625rem;
  }
}
.home-tab ::v-deep .van-tabs__line {
  bottom: 19px;
}
.home-tab ::v-deep .van-tab--active {
  font-weight: bold;
  font-size: 16px;
}
.home-tab ::v-deep .van-tabs__nav {
  background-color: transparent !important;
}
.home-content {
  margin: 0 0.75rem;
}
//新的样式
.shops-detail {
  margin: 0.375rem 0 0 0;
}
.shops-bg {
  border-radius: 8px 8px 0px 0px;
  background-color: #fff;
  padding: 1px 2px 0 2px;
}
.detail-head {
  background: linear-gradient(180deg, #eef3f8 0%, #ffffff 100%);
  border-radius: 8px 8px 0px 0px;
  padding: 18px 15px 0px 13px;
}
.detail-head .detail-border {
  border-bottom: 1px solid #e6e6e6;
  padding: 0 0 15px 0;
}
.detail-head .head-shops {
  padding: 0 0 0.8125rem 0;
}
.head-title .icon-dianpu {
  font-weight: 500;
}
.head-title h3 {
  font-weight: bold;
  font-size: 0.8125rem;
  color: #00001c;
}
.head-more h4 {
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  color: #6e6e79;
  padding: 0 0.3125rem 0 0;
  font-weight: 400;
}
.head-more .icon-icon_more11 {
  font-size: 0.75rem;
  color: #aaaab3;
}
.brief {
  font-weight: 400;
  font-size: 13px;
  color: #6e6e79;
  text-align: left;
  white-space: pre-line;
}

.detail-msg {
  background: #ffffff;
  border-radius: 0px 0px 8px 8px;
  padding: 1rem 0.75rem 0.75rem 0.75rem;
  // margin-top:-2.125rem;
}
.detail-msg .msg-head {
  text-align: left;
  padding: 0 0 1.1875rem 0;
}
.msg-head h3 {
  font-weight: bold;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  color: #00001c;
  padding: 0 0 0.5rem 0;
}
.msg-head h4 {
  font-size: 0.8125rem;
  color: #6e6e79;
  font-weight: 400;
}
.address-icon {
  width: 1.5rem;
  height: 1.5rem;
  background: #f0f0f1;
  border-radius: 50%;
}
.address-icon .icon-zx_map_local {
  font-size: 0.75rem;
}
.detail-msg .delivery {
  padding: 0;
}
.delivery .delivery-price {
  font-weight: 400;
  font-size: 0.8125rem;
  color: #00001c;
}
.delivery .delivery-desc {
  font-size: 0.8125rem;
  color: #6e6e79;
  line-height: 1.125rem;
  padding: 0.625rem 0 0.625rem 0;
}
.recommend-goods {
  margin: 15px 0 0 0;
  width: 100%;
}
.recommend-goods h3 {
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  color: #00001c;
  padding: 0 0 13px 0;
  text-align: left;
}
.recommend-goods .goods-list {
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}
.goods-item {
  width: calc(50% - 5px);
  margin: 0 0 10px 0;
  background-color: #fff;
  border-radius: 12px;
}
.view-larger {
  font-weight: 400;
  font-size: 0.8125rem;
  color: #ffffff;
  line-height: 0.8125rem;
  padding: 0.5rem 0.8125rem;
  border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 50%;
  bottom: 0.4375rem;
  transform: translate(-50%);
  z-index: 95;
}
.introduce-content {
  text-align: left;
  white-space: pre-line;
  ::v-deep img {
    max-width: 100% !important;
    height: auto !important;
  }
  // height: 31.25rem;
  // overflow-y: scroll; /* 添加垂直滚动条 */
}
.introduce {
  padding: 1.25rem 0.9375rem 0.9375rem 0.9375rem;
}
.introduce-head {
  padding: 0 0 1.25rem 0;
}
.introduce-head h3 {
  font-weight: bold;
  font-size: 1.125rem;
  color: #00001c;
  text-align: left;
}
.introduce-head .introduce-down {
  padding: 0.5rem 0.5rem;
  background: #f0f0f1;
  border-radius: 50%;
}
.introduce-down .icon-guanbi {
  font-size: 0.75rem;
}
</style>
<style lang="scss" rel="stylesheet/scss">
#all .van-collapse-item__title--expanded .van-cell__right-icon {
  margin-left: 3rem;
}

.pcStyle #all #store-info img {
  max-width: calc(375px - 1.6rem) !important;
}

#all #store-info img {
  max-width: calc(100%) !important;
  height: auto;
  // display: flex;
}

.reserveTxt {
  text-align: left;
  font-size: 12px;
  color: #6e6e79;
  padding: 0 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .reserveTxt_R {
    margin-left: 0.625rem;
  }
}

.circleBox {
  width: 100%;
  height: 7.19rem;
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/independenceBalance.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .circleLeft {
    margin-left: 2.03rem;
    color: #ffd772;
    font-size: 0.84rem;
    text-align: left;

    .priceCir {
      margin-top: 0.5rem;
      margin-bottom: 0.8rem;
      font-size: 0.84rem;

      .pric {
        font-size: 1.75rem;
      }
    }
  }

  .circleRight {
    width: 4.38rem;
    height: 1.56rem;
    background-color: #f6db97;
    border-radius: 0.78rem;
    font-size: 0.84rem;
    color: #494247;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2.03rem;
  }
}
.posHistory {
  position: fixed;
  right: 0.56rem;
  top: 14.8rem;
  width: 2.81rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  .posHistory_t {
    width: 2.5rem;
    height: 2.5rem;
    background: #ff1313;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    .iconfont {
      font-size: 1.2rem;
    }
  }
  .posHistory_b {
    font-weight: 400;
    font-size: 0.56rem;
    color: #3b3b4a;
    padding: 0.22rem 0.28rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.75rem;
    margin-top: -0.5rem;
  }
}
</style>
